<!doctype html>
<html>
<head>
  <title>Test Playing Card Collections Element</title>
  <script src="polymer-all/polymer/polymer.js"></script>  
  <link rel="stylesheet" href="polymer-all/polymer-ui-elements/basic.css">
  <link rel="import" href="card-collection-element.html">
  <link rel="import" href="card-element.html">
  <link rel="import" href="card-tester-element.html">
  <style>
  html, body {
    margin: 0;
    width:100%;
    height:100%;
    margin:0;
    font-family:Arial,san-serif;
    font-size:18pt;
    background-color:green;
  }

  #testarea {
    width:100%;
    height:100%;
    padding:30px;
  }

  html, body {
    width:100%;
    height:100%;
  }

  #collectiontester::x-collection {
  border: 5px solid blue;
  }

  card-card,
  #deck::x-card,
  #verticalstack::x-card,
  #collectiontester::x-card,
  #fan::x-card {
    width:72px;
    height:100px;
    font-size:8px;
    border: 2px solid red;
  }

  * ::x-contents {
    border:1px solid gray;
    border-radius:3%;
  }

  #fan::x-card {
    margin-left:100px;
  }

  .exampleCollection {
    max-width:300px;
    float:left;
  }

  #testarea {
    position:relative;
  }
  </style>
</head>
<body>
<div id="testarea">
  <div class="exampleCollection">
  <h1>Combine sub elements with procedural elements</h1>
  <card-collection id="deck" presentation="horizontal" stackspacing="-36px">
    <card-card value="12" suit="hearts" faceup="true"></card-card>
  </card-collection>
  </div>
  <div class="exampleCollection">
  <h1>Vertical Display</h1>
  <card-collection id="verticalstack" stackspacing="-50px" presentation="vertical">
    <card-card value="13" suit="hearts" faceup="true"></card-card>
    <card-card value="11" suit="diamonds" faceup="true"></card-card>
    <card-card value="10" suit="spades" faceup="true"></card-card>
  </card-collection>
  </div>
  <div class="exampleCollection">
  <h1>Fan Display</h1>
  <card-collection id="fan" presentation="fan" fandegrees="12">
    <card-card value="1" suit="spades" faceup="true"></card-card>
    <card-card value="2" suit="hearts" faceup="true"></card-card>
    <card-card value="3" suit="clubs" faceup="true"></card-card>
    <card-card value="4" suit="diamonds" faceup="true"></card-card>
    <card-card value="5" suit="spades" faceup="true"></card-card>
    <card-card value="6" suit="hearts" faceup="true"></card-card>
    <card-card value="7" suit="hearts" faceup="true"></card-card>
    <card-card value="10" suit="clubs" faceup="true"></card-card>
    <card-card value="11" suit="diamonds" faceup="true"></card-card>
    <card-card value="12" suit="spades" faceup="true"></card-card>
    <card-card value="13" suit="hearts" faceup="true"></card-card>
  </card-collection>
  </div>
    <div class="exampleCollection">
    <h1>Collection Tester</h1>
      <collection-tester id="collectiontester" presentation="fan" fandegrees="12">    
  </collection-tester>
    </div>
</div>
<polymer-element name="collection-tester" attributes="collection fandegrees presentation">
<template>
    <style>
    #collection::x-card {
        width: {{ cardwidth }}px;
        height: {{ cardheight }}px;
         -webkit-transform-origin-y:{{originy}}%;
         transform-origin-y:{{originy}}%;
         -webkit-transform-origin-x:{{originx}}%;
         transform-origin-x:{{originx}}%;
    }
    #collection {
        width:{{testerwidth}}px;
        height:{{testerheight}}px;
    }
card-card {
    width:72px;
    height:100px;
    font-size:8px;
    border: 2px solid red;
  }

    </style>
    <card-tester id="cardtester" angle="{{fandegrees}}" anglestep="0.2" anglemax="30" cardwidth="{{cardwidth}}" cardheight="{{cardheight}}" originx="{{originx}}" originy="{{originy}}"></card-tester>
  <label for="cardcount">Num Cards:</label>
  <input id="cardcount" type="range"  min="0" max="53" step="1" value="{{cardcount}}"><span>{{cardcount}}</span>
    <card-collection id="collection" pseudo="x-collection" presentation="{{ presentation }}" fandegrees="{{ fandegrees }}">
      <template repeat="{{card in cards}}"><card-card value="{{card.value}}" suit="{{card.suit}}" style="width:{{cardwidth}}px;height:{{cardheight}}px;"></card-card></template>
    </card-collection>
</template>
<script>
    Polymer('collection-tester',
                  {
                      cardcount:20,
                      cardwidth:72,
                      cardheight:100,
                      testerwidth:200,
                      testerheight:200,
                      originx:70,
                      originy:70,
                      fireMutation: function() {
                        this.onMutation(this.$.collection, this.$.collection.presentationChanged.bind(this.$.collection));
                      },
                      created: function() {
                          this.collection = this.$.collection;
                          this.cardcountChanged();
                      },
                      cardheightChanged:function() {
                          this.testerwidth = this.cardheight * 2;
                          this.testerheight = this.cardheight * 2;
                          this.$.collection.async('presentationChanged');
                      },
                      cardwidthChanged:function() {
                          this.cardheightChanged();
                      },
                      cardcountChanged:function() {
                        var cards = [];
                          var currentSuit = 0;
                          var suits = ['clubs', 'diamonds', 'spades', 'hearts'];
                        for (var i = 0; i < this.cardcount; ++i) {
                             cards.push({'value':i % 13, 'suit':suits[currentSuit]});
                        }
                        this.fireMutation();
                        this.cards = cards;
                        
                      },
                      xcardcountChanged:function() {
                          var cards = [];
                          var suits = ['clubs', 'diamonds', 'spades', 'hearts'];
                          var cardInSuit = 0;
                          var currentSuit = 0;
                          for (var i = 0; i < this.cardcount; ++i) {
                              var c = new Card();
                              c.value = cardInSuit;
                              c.suit = suits[currentSuit];
                              cards.push(c);
                              this.$.collection.appendChild(c);
                              ++cardInSuit;
                              if (cardInSuit > 13) {
                                  cardInSuit = 1;
                                  currentSuit++;
                              }
                          }
                      }
                  });
</script>
</polymer-element>

<script>
    var deckCollection = document.getElementById('deck');

window.addEventListener('WebComponentsReady', function () {
    var card = new Card();
    card.value = 5;
    card.suit = 'clubs';
    var ace = new Card();
    ace.value = 1;
    ace.suit = 'spades';
    ace.addEventListener('pointerdown', function(e){console.log('e:'+ e);});
    deckCollection.cards = deckCollection.cards.concat([card, ace]);

});
</script>
</body>
</html>
